<template>
  <div class="top-bar">
    <div class="box">
      <div class="left">
        <i class="iconfont icon-taiyang"></i>
        <span class="span1">新中地天气</span>
        <h2 class="weather">{{ city }}</h2>
        <span class="span2">实时天气：{{ weather }}{{ temperature }}°</span>
        <span class="span3">{{ winddirection }}风{{ windpower }}级</span>
        <div class="formation">
          <h2>关于:</h2>
          <p>这个应用可以用来追踪你选择城市的当前天气</p>
          <h2>如何使用:</h2>
          <p>1.点击搜索框输入你希望追踪的城市</p>
          <p>2.在搜索结果中选中一个城市，你将获取当地最新的天气</p>
          <p>3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</p>
          <h2>移除城市:</h2>
          <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
          <a @click="del">关闭</a>
        </div>
      </div>
      <i class="iconfont icon-xinxi" @click="formation"></i>
    </div>
  </div>
</template>

<script>
import { getIp } from '@/api/location'
import axios from 'axios'
export default{
  name: 'TopBar',
  data() {
    return {
      city: '',
      adcode: '',
      weather: '',
      temperature: '',
      winddirection: '',
      windpower: '',
    }
  },
  mounted() {
    this.currentCity()
  },
  methods: {
    currentCity() {
      getIp()
        .then((res) => {
          this.city = res.data.city
          this.adcode = res.data.adcode
        })
        .then(() => {
          axios({
            url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.adcode}&key=b36dd440f158868263e0266de8cc36b8&extensions=base`,
            method: 'GET',
          }).then((res) => {
            this.weather = res.data.lives[0].weather
            // console.log(res)
            this.temperature = res.data.lives[0].temperature
            this.winddirection = res.data.lives[0].winddirection
            this.windpower = res.data.lives[0].windpower
          })
        })
    },
    formation() {
      document.querySelector('.formation').style.display = 'block'
    },
    del() {
      document.querySelector('.formation').style.display = 'none'
    },
  },
}
</script>

<style scope>
@import 'https://at.alicdn.com/t/c/font_4027746_hpgrq65kidd.css';
.top-bar {
  height: 80px;
  padding-top: 20px;
  display: fixed;
  color: #fff;
  /* background-color: chartreuse; */
  box-sizing: border-box;
  box-shadow: 0 2px 1px 2px rgba(0, 0, 0, 0.1);
}
.top-bar .box {
  display: flex;
  justify-content: space-between;
  width: 80%;
  height: 40px;
  margin: auto;
  /* background-color: aqua; */
  line-height: 40px;
  box-sizing: border-box;
}
.top-bar .box .left {
  display: flex;
  font-size: 24px;
}
.top-bar .box .left i {
  font-size: 24px;
  margin-right: 10px;
}
.top-bar .box .left h2 {
  margin-left: 15px;
  font-size: 18px;
}
.top-bar .box .left .span2 {
  margin-left: 15px;
  font-size: 15px;
}
.top-bar .box .left .span3 {
  margin-left: 15px;
  font-size: 15px;
}
.top-bar .box .left .formation {
  display: none;
  position: absolute;
  left: 38%;
  margin: 150px auto 0;
  width: 380px;
  height: 280px;
  color: black;
  background-color: #fff;
}
.top-bar .left .formation h2 {
  margin-top: 25px;
  font-size: 16px;
  line-height: 16px;
}
.top-bar .left .formation p {
  font-size: 12px;
  text-indent: 2em;
  line-height: 20px;
}
.top-bar .left .formation a {
  margin: 30px 0 20px 18px;
  padding: 8px 24px;
  font-size: 12px;
  color: #fff;
  background-color: #00668a;
  cursor: pointer;
}

.top-bar .box i {
  font-size: 20px;
  margin-left: 13px;
  cursor: pointer;
}
</style>
